<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%String path = request.getContextPath();
			String basePath = request.getScheme() + "://"
					+ request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
			if (session.getAttribute("email") != null
					&& session.getAttribute("token") != null) {
				response.sendRedirect(basePath + "#homePage");
			} else {
				// Set to expire far in the past.
				response.setHeader("Expires", "Sat, 6 May 1995 12:00:00 GMT");

				// Set standard HTTP/1.1 no-cache headers.
				response.setHeader("Cache-Control",
						"no-store, no-cache, must-revalidate");

				// Set IE extended HTTP/1.1 no-cache headers (use addHeader).
				response
						.addHeader("Cache-Control", "post-check=0, pre-check=0");

				// Set standard HTTP/1.0 no-cache header.
				response.setHeader("Pragma", "no-cache");
			}%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<% String islegal = "no"; %>
	<head>
		<link rel="stylesheet"
			href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
		<!-- 
		<link rel="stylesheet" type="text/css" href="css/template.css" />
		<link rel="stylesheet" type="text/css" href="demo.css" />
		 -->
		<link rel="stylesheet" type="text/css" href="css/css.css" />	
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script
			src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
		<script type="text/javascript" src="jquery/template.js"></script>
		<script type="text/javascript" src="demo.js"></script>
		
		
	</head>
	<body>
		<!--#################### login #####################-->
		<div data-role="page" id="loginPage">
		<% islegal = "no"; %>
			<div data-role="header" data-theme="b">
				<h1>
					CampusGroup
				</h1>
			</div>

			<div data-role="navbar" class="ui-disabled" data-theme="c">
				<ul>
					<li>
						<a href="#homePage" data-role="button" data-icon="home">Home</a>
					</li>
					<li>
						<a href="#groupPage" data-role="button" data-icon="plus">Groups</a>
					</li>
					<li>
						<a href="#profilePage" data-role="button" data-icon="star">Profile</a>
					</li>
				</ul>
			</div>
			<div data-role="content" class = "LRFcontent">
				<p>
					Please login with your email and password.
				</p>
				<div data-role="fieldcontain">
					<div id="test_login_e"
						style="width: 100px; color: red; display: none">
						Invalid
					</div>
					<label class="ui-input-text" for="email">
						Email:
					</label>
					<input id="username_login" name="email" value="" type="text"
						autocomplete="on" placeholder="Email">
					<div id="test_login_p"
						style="width: 100px; color: red; display: inline">
						cannot be empty
					</div>
					<br />
					<label class="ui-input-text" for="password">
						Password:
					</label>
					<input class="password" id="password" name="password" value=""
						type="password" placeholder="Password">
					<button class="submit" name="servlet/FrontController" id="loginBtn"
						data-inline="true">
						Login
					</button>
					<p id="message-login" class="message"
						style="color: red; display: none"></p>
				</div>
			</div>
			<div data-role="controlgroup" data-type="horizontal" class ="buttonGroup">
				<a href="#registerPage" data-role="button" data-icon="gear">Register</a>
				<a href="#forgotPage" data-role="button" data-icon="info">Reminder</a>
				<a href="#loginPage" data-role="button" data-icon="check"
					class="ui-btn-active ui-state-persist">Log In</a>
			</div>
		</div>

		<!--#################### register#####################-->
		<div data-role="page" id="registerPage">
		<% islegal = "no"; %>
			<div data-role="header" data-theme="b">
				<h1>
					CampusGroup
				</h1>
			</div>

			<div data-role="navbar" class="ui-disabled" data-theme="c">
				<ul>
					<li>
						<a href="#homePage" data-role="button" data-icon="home">Home</a>
					</li>
					<li>
						<a href="#groupPage" data-role="button" data-icon="plus">Groups</a>
					</li>
					<li>
						<a href="#profilePage" data-role="button" data-icon="star">Profile</a>
					</li>
				</ul>
			</div>
			<div data-role="content" class = "LRFcontent">
				<p>
					Please register only with your uni email.
				</p>
				<div data-role="fieldcontain">
					<div id="test_register"
						style="width: 100px; color: red; display: none">
						Invalid
					</div>
					<label class="ui-input-text" for="email">
						Email:
					</label>
					<input class="email" id="username_register" name="email" value=""
						type="text" autocomplete="on" placeholder="Email">
					<button class="submit" name="servlet/FrontController"
						id="registerBtn" data-inline="true">
						Register
					</button>
					<p id="message-register" class="message"
						style="color: red; display: none"></p>
				</div>
			</div>
			<div data-role="controlgroup" data-type="horizontal" class ="buttonGroup" >
				<a href="#registerPage" data-role="button" data-icon="gear"
					class="ui-btn-active ui-state-persist">Register</a>
				<a href="#forgotPage" data-role="button" data-icon="info">Reminder</a>
				<a href="#loginPage" data-role="button" data-icon="check">Log In</a>
			</div>
		</div>

		<!--#################### forgot #####################-->
		<div data-role="page" id="forgotPage">
		<% islegal = "no"; %>
			<div data-role="header" data-theme="b">
				<h1>
					CampusGroup
				</h1>
			</div>

			<div data-role="navbar" class="ui-disabled" data-theme="c">
				<ul>
					<li>
						<a href="#homePage" data-role="button" data-icon="home">Home</a>
					</li>
					<li>
						<a href="#groupPage" data-role="button" data-icon="plus">Groups</a>
					</li>
					<li>
						<a href="#profilePage" data-role="button" data-icon="star">Profile</a>
					</li>
				</ul>
			</div>
			<div data-role="content" class = "LRFcontent">
				<p>
					Please get your password only with your uni email.
				</p>
				<div data-role="fieldcontain">
					<div id="test_remind"
						style="width: 100px; color: red; display: none">
						Invalid
					</div>
					<label class="ui-input-text" for="email">
						Email:
					</label>
					<input class="email" id="username_remind" name="email" value=""
						type="text" autocomplete="on" placeholder="Email">
					<button class="submit" name="servlet/FrontController"
						id="remindBtn" data-inline="true">
						Remind me
					</button>
					<p id="message-forgot" class="message"
						style="color: red; display: none"></p>
				</div>
			</div>

			<div data-role="controlgroup" data-type="horizontal" class ="buttonGroup">
				<a href="#registerPage" data-role="button" data-icon="gear">Register</a>
				<a href="#forgotPage" data-role="button" data-icon="info"
					class="ui-btn-active ui-state-persist">Reminder</a>
				<a href="#loginPage" data-role="button" data-icon="check">Log In</a>
			</div>

		</div>


		<!-- =================home page================= -->
		<div data-role="page" id="homePage">
		<% islegal = "yes"; %>

			<div data-role="header" data-theme="b">
				<h1>
					CampusGroup
				</h1>
				<a href="#logoutPage" data-role="button" data-icon="delete"
					class="ui-btn-right">Logout</a>
			</div>

			<div data-role="navbar" data-theme="c">
				<ul>
					<li>
						<a href="#homePage" data-role="button" data-icon="home"
							class="ui-btn-active ui-state-persist">Home</a>
					</li>
					<li>
						<a href="#groupPage" id = "groupNav" class = "showGroups" data-role="button" data-icon="plus">Groups</a>
					</li>
					<li>
						<a href="#profilePage" data-role="button" data-icon="star">Profile</a>
					</li>
				</ul>
			</div>

			<div data-role="content" class = "homePageContent">
				<h1>
					<br>
					Welcome
					<small> This is
						implemented by Josh & Tony | <a href="http://www.unimelb.edu.au/">
							Have a nice day! </a> </small>
				</h1>

				<h2>
					Welcome to this home page, check your group information and enter a chat room in "group" tab
				</h2>
				<br>
				<br>
				<h2>
					check you account information in "profile" tab
				</h2>
			</div>

		</div>


		<!-- =================profile page================= -->
<div data-role="page" id="profilePage">
<% if("yes".equals(islegal))
	 {
%>
        
        <div data-role="header" data-theme="b">
          <h1>CampusGroup</h1>

          <a  href="#logoutPage" data-role="button" data-icon="delete" class = "ui-btn-right">Logout</a>
        </div>

      <div data-role="navbar" data-theme="c">
        <ul>
            <li><a href="#homePage" data-role = "button" data-icon="home" >Home</a></li>
          <li><a href="#groupPage" data-role = "button" data-icon="plus" >Groups</a></li>
            <li><a href="#profilePage" data-role = "button" data-icon="star" class="ui-btn-active ui-state-persist">Profile</a></li>
        </ul>
      </div>

      <div data-role="content" >
        <h1>
          <br>
          Welcome !
        </h1>   
          <%--<%=session.getAttribute("email")%>--%> You can maintain your account here.
      </div>
    
      <div data-role="controlgroup" data-type="horizontal">
          <p>click this button to reset your password: </p>
          <a  href="#resetPage" data-role="button" data-icon="info">Reset</a>
          
      </div>

      <div data-role="controlgroup" data-type="horizontal">
        <p>click this button to delete all your account information: </p>
          <a  href="#deletePage" data-role="button" data-icon="gear">Delete</a>
         
          
      </div>

<% }else
response.sendRedirect(basePath);
%> 
</div>



    <!--#################### delete #####################-->
    <div data-role="page" id="deletePage">
    <% if("yes".equals(islegal))
	 {
%>
      <div data-role="header" data-theme="b">
          <h1>Profile-delete</h1>
          <a href="#profilePage" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
          <a  href="#logoutPage" data-role="button" data-icon="delete" class = "ui-btn-right">Logout</a>
        </div>

      <div data-role="navbar" data-theme="c">
          <ul>
            <li><a href="#homePage" data-role = "button" data-icon="home" >Home</a></li>
            <li><a href="#groupPage" data-role = "button" data-icon="plus" >Groups</a></li>
            <li><a href="#profilePage" data-role = "button" data-icon="star" class="ui-btn-active ui-state-persist">Profile</a></li>
          </ul>
      </div>

      <div data-role="content">
        <p>Are you sure you want to delete all your registration information?</p>
      <div data-role="fieldcontain">
             
          <button class="submit" name= "servlet/FrontController" id="deleteBtn"  data-inline="true">Confirm</button>
          <p id = "message-delete" class = "message" style = "color: red; display:none"></p>
        </div>
      </div>

      <% }else
response.sendRedirect(basePath);
%> 
  </div>

  <!-- =========================Reset=====================-->
  <div data-role="page" id="resetPage">
  <% if("yes".equals(islegal))
	 {
%>
      <div data-role="header" data-theme="b">
          <h1>Profile-Reset</h1>
          <a href="#profilePage" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
          <a  href="#logoutPage" data-role="button" data-icon="delete" class = "ui-btn-right">Logout</a>
        </div>

      <div data-role="navbar" data-theme="c">
          <ul>
            <li><a href="#homePage" data-role = "button" data-icon="home" >Home</a></li>
            <li><a href="#groupPage" data-role = "button" data-icon="plus" >Groups</a></li>
            <li><a href="#profilePage" data-role = "button" data-icon="star" class="ui-btn-active ui-state-persist">Profile</a></li>
          </ul>
      </div>

      <div data-role="content">
        <p>Confirm to reset password?</p>
      <div data-role="fieldcontain">
             
          <button class="submit" name= "servlet/FrontController" id="resetBtn"  data-inline="true">Confirm</button>
          <p id = "message-reset" class = "message" style = "color: red; display:none"></p>
        </div>
      </div>

      <% }else
response.sendRedirect(basePath);
%> 
  </div>


    <!-- =====================Logout=====================-->
  <div data-role="page" id="logoutPage">
  <% if("yes".equals(islegal))
	 {
%>
  
      <div data-role="header" data-theme="b">
          <h1>Logout</h1>
        </div>

      <div data-role="navbar" data-theme="c">
          <ul>
            <li><a href="#homePage" data-role = "button" data-icon="home" >Home</a></li>
            <li><a href="#groupPage" data-role = "button" data-icon="plus" >Groups</a></li>
            <li><a href="#profilePageprofilePage" data-role = "button" data-icon="star" >Profile</a></li>
          </ul>
      </div>

      <div data-role="content">
        <p>Confirm to logout?</p>
      <div data-role="fieldcontain">
             
          <button class="submit" name= "servlet/FrontController" id="logoutBtn"  data-inline="true">Confirm</button>
          <p id = "message-logout" class = "message" style = "color: red; display:none"></p>
        </div>
      </div>

      <% }else
response.sendRedirect(basePath);
%> 
  </div>


  <!-- =====================group page=====================-->
  <div data-role="page" id="groupPage" data-title="Groups Panel" data-theme="d" data-url="groupPage">
    <% if("yes".equals(islegal))
	 {
%>
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Groups Panel</h1>
        <a href="#homePage" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a> 
        <a  href="#logoutPage" data-role="button" data-icon="delete" class = "ui-btn-right">Logout</a>
        <div  data-type="horizontal">
        <a href="#createGroupPage" data-role="button" data-icon="plus" data-iconpos="notext"  data-inline="true">Create a group</a>  
        <a href="#groupPage" class = "showGroups" data-role="button" data-icon="refresh" data-iconpos="notext"  data-inline="true">Refresh</a>
        <a href="#infoPage" data-rel="dialog"  data-transition="slidedown" data-role="button" data-icon="info" data-iconpos="notext"  data-inline="true">Information</a>
        </div>
    </div><!-- /header -->

    <div data-role="content" id = "groupListDiv" class = "listViews">
        <ul id="grouList" data-role="listview" data-icon="false" data-split-icon="delete" data-split-theme="d">
         
        </ul>
    </div><!-- /content -->
    <% }else
response.sendRedirect(basePath);
%> 
  </div>

  
<!-- ================create group page================= -->
<div data-role="page" id="createGroupPage">
      <% if("yes".equals(islegal))
	 {
%>  
        <div data-role="header" data-theme="b">
          <h1>CampusGroup-create</h1>
          <a href="#groupPage" class = "showGroups" data-rel="back" onclick = "createGroupBack()" data-icon="arrow-l" data-iconpos="notext">Back</a>
          <a  href="#logoutPage" data-role="button" data-icon="delete" class = "ui-btn-right">Logout</a>
        </div>

        <!-- <div data-role="navbar" data-theme="c">
        <ul>
            <li><a href="#homePage" data-role = "button" data-icon="home" >Home</a></li>
          <li><a href="#groupPage" data-role = "button" data-icon="plus" class="ui-btn-active ui-state-persist">Groups</a></li>
            <li><a href="#profilePage" data-role = "button" data-icon="star" >Profile</a></li>
        </ul>
        </div> -->

      <div data-role="content" class="homePageContent">
        <p>Please input a name of the new group (only alphanumeric characters are allowed):</p>
        <div data-role="fieldcontain">
        <div id = "test_createGroup" style = "width:100px; color: red; display:none">Invalid</div>
          
          <label class="ui-input-text"for="groupName">Group name:</label>
          <input class = "groupName" id="name_group" name="groupName" value="" type="text" autocomplete="on" placeholder="type in the name here" >     
          <button class="submit" name= "servlet/FrontController" id="creategroupBtn"  data-inline="true">Create</button>
            <p id = "message-createGroup" class = "message" style = "color: red; display:none"></p>
          </div>
      </div>
      <div data-role="controlgroup" data-type="horizontal">
    </div>
    <% }else
response.sendRedirect(basePath);
%> 
</div>


<!-- =================information page(group)================= -->
<div data-role="page" id="infoPage">
     <% if("yes".equals(islegal))
	{
%>   
        <div data-role="header" data-theme="b">
          <h1>CampusGroup-info</h1>
        </div>

      <div data-role="content">
        <h2>
          Welcome!
          <small> This is implemented
          by Josh & Tony </small>
        </h2>
    
        <h4>
          You can maintain your groups in this tab <br>
          To add new group, please click on the plus icon <br>
          To delete a group, please click on the "delete" button <br>
          To enter a chat room, please click on the name of the group <br>
          <a href="http://www.unimelb.edu.au/"> Have a
          nice day! </a>
        </h4>
      </div>
      <% }else
response.sendRedirect(basePath);
%>      
</div>


<!-- =====================online chat page=====================-->
  <div data-role="page" id="chatRoomPage" data-title="Chat room" data-theme="d">
    <% if("yes".equals(islegal))
	 {
%>
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1 >Online Chat</h1>
        <a href="#groupPage" id="back" onclick = "chatBack()" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
        <a  href="#logoutPage" data-role="button" data-icon="delete" class = "ui-btn-right">Logout</a> 
        <div  data-type="horizontal">
        <a href="#memberListPage" id = "getMemberList" onclick = "MemberList(this)" data-role="button" data-icon="gear" data-iconpos="notext"  data-inline="true">Member List</a>  
        <a href="#invitePage" data-role="button" data-icon="plus" data-iconpos="notext"  data-inline="true">Invite</a>
        <a href="#infoPageChatRoom" data-rel="dialog"  data-transition="slidedown" data-role="button" data-icon="info" data-iconpos="notext"  data-inline="true">Information</a>
        </div>
    </div><!-- /header -->

    <div data-role="content" id = "chatContentDiv">
        
    </div><!-- /content -->
    

    <div data-role="footer" data-position="fixed">
      <label class="ui-input-text"for="email">Message:</label>
      <input class = "chatMessage" id="chatMessage" name="message" value="" type="text" autocomplete="on" placeholder="type in messages here" >     
      <button class="submit" name= "servlet/FrontController" id="sendMessageBtn"  data-inline="true">Send</button>
      <p id = "message-chat" class = "message" style = "color: red; display:none"></p>  
    </div><!-- /content -->
    <% }else
response.sendRedirect(basePath);
%> 
  </div>

  
<!-- =====================member list page=====================-->
  <div data-role="page" id="memberListPage" data-title="Chat room" data-theme="d">
   <% if("yes".equals(islegal))
	 {
%>
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Onlin Chat-Member list</h1>
        <a href="#chatRoomPage" data-rel="back"  data-icon="arrow-l" data-iconpos="notext">Back</a> 
        <a  href="#logoutPage" data-role="button" data-icon="delete" class = "ui-btn-right">Logout</a>
        
    </div><!-- /header -->

    <div data-role="content" id= "memberListDiv" class = "listViews">
    	<ul id="memberList" data-role="listview" data-icon="false" data-split-icon="delete" data-split-theme="d">
        </ul>
    </div><!-- /content -->
   <% }else
response.sendRedirect(basePath);
%>  
  </div>

<!-- =====================invite page=====================-->
  <div data-role="page" id="invitePage" data-title="Chat room" data-theme="d">
    <% if("yes".equals(islegal))
	 {
	%>
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Online Chat-Invite</h1>
        <a href="#chatRoomPage" data-rel="back" onclick= "inviteBack(this)" data-icon="arrow-l" data-iconpos="notext">Back</a> 
        <a href="#logoutPage" data-role="button" data-icon="delete" class = "ui-btn-right">Logout</a>
        
    </div><!-- /header -->

    <div data-role="content" class="homePageContent">
      <label class="ui-input-text"for="email">Username:</label>
      <input class = "userName" id="userName-invite" name="usename" value="" type="text" autocomplete="on" placeholder="type in a username here" >     
      <button class="submit" onclick = "invite()"name= "servlet/FrontController" id="sendInviteUsernameBtn"  data-inline="true">Invite</button>
      <p id = "message-invite" class = "message" style = "color: red; display:none"></p>  
    </div><!-- /content -->
  <% }else
response.sendRedirect(basePath);
%>   
  </div>

<!-- =================information page(chatroom)================= -->
<div data-role="page" id="infoPageChatRoom">
     <% if("yes".equals(islegal))
			{
	%>   
        <div data-role="header" data-theme="b">
          <h1>CampusGroup-info</h1>
        </div>

      <div data-role="content">
        <h2>
          Welcome!
          <small> This is implemented
          by Josh & Tony </small>
        </h2>
    
        <h4>
          You can maintain your groups in this tab <br>
          To invite a user into this group, please click on the plus icon <br>
          To send messages, please type in content and click on "send"<br>
          <a href="http://www.unimelb.edu.au/"> Have a
          nice day! </a>
        </h4>
      </div>     

<% }else
response.sendRedirect(basePath);
%> 
</div>

</body>
</html>


 